<template>
  <div>
      <!--    头部-->
     <v-header :indexclass="gundong">
       <img src="" WIDTH="100%" slot="imgsrc" @click="$router.push('/Classify');">
        <router-link to="/Login" slot="header-right">登录</router-link>
     </v-header>
      <div class="content">
        <div class="banner">
        </div>
        <!-- 轮播图       -->
        <v-banner></v-banner>
        <!--    内容   618百亿现金 -->
        <v-contentFloor></v-contentFloor>
        <!-- 轮播列表       -->
        <v-BannerList></v-BannerList>
        <!--        京东秒杀-->
        <v-Seckill></v-Seckill>
        <!--     展示   -->
        <v-Simple></v-Simple>
        <!--     商品列表   -->
        <v-ShopList></v-ShopList>
        <!--    底部导航   -->
        <v-ContentFloor></v-ContentFloor>
      </div>
      <div class="BackTop" @click="gotop" v-show="gt"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import header from '../components/index/Header.vue'
import banner from '../components/index/Banner.vue'
import contentFloor from '../components/index/content-floor.vue'
import BannerList from '../components/index/BannerList.vue'
import Seckill from "../components/index/Seckill.vue"
import Simple from '../components/index/Simple.vue'
import ShopList from "../components/index/ShopList.vue"
import ContentFloor from "../components/index/ContentFloor.vue"

export default {
  name: 'Index',
  data:()=>({
    'gt':false,
    'indexHeader':'',
    'gundong':''
  }),
  components: {
    'v-header':header,
    'v-banner':banner,
    'v-contentFloor':contentFloor,
    'v-BannerList':BannerList,
    'v-Seckill':Seckill,
    'v-Simple':Simple,
    'v-ShopList':ShopList,
    'v-ContentFloor':ContentFloor
  },
  // props:{
  //   indexHeader:String
  // },
  created() {
    this.$store.state.backtop=true
  },
  mounted() {
            this.backtop();

    },
  methods:{
     // get(){
     //   // this.indexHeader=a
     //   // console.log(this.indexHeader)
     // },
     //监听滚动
     backtop(){
                let scroll=document.getElementsByClassName("content")[0];
                scroll.addEventListener('scroll',this.handscroll,true);
     },
     //滚动函数
    handscroll(){
              let scroll=document.getElementsByClassName("content")[0];
              if(scroll.scrollTop>0){
                this.gundong='gundong'
              }else {
                this.gundong=''
              }
              if(scroll.scrollTop >  100){
                this.gt=true;
              }else{
                this.gt=false;
              }
    },
    //置顶
   gotop(){
       let scroll=document.getElementsByClassName("content")[0];
       scroll.scrollTop=0;
   }

  }
}
</script>
<style scoped>
a{
  text-decoration: none;
  color: #fff;
}
  .content{
    width: 100vw;
    overflow: hidden;
    height:calc(100vh - 6.5vh - 3.125rem) ;
    overflow-y:scroll;

    position: relative;
    padding-top: 2.2rem;
  }
  .content::-webkit-scrollbar{
    display: none;
  }
  .banner{
    padding-top: 2.4rem;
    width: 110%;
    height:5.5rem;
    margin-left: -5%;
    background-color: #D53324;
    position: absolute;
    top: 0rem;
    z-index: 1;
    border-bottom-left-radius: 50% 1.5rem;
    border-bottom-right-radius: 50% 1.5rem;
  }
  .BackTop{
    width: 2.375rem;
    height: 2.375rem;
    background-image: url("");
    background-size: 100% 100%;
    position: fixed;
    right: 0.3125rem;
    bottom: 7.5rem;
  }
  .nut-searchbar *{
    background: #fff !important;
  }
  .gundong{
    background: #E43130;
  }
</style>